<template>
  <div class="app-container">
    <div class="qrCodeContainer" style="width: 450px; height: 50px; display: none">
      <div v-for="(item, index) in imageList" :key="index" style="width: 100%" class="main qrCode content">
        <div class="left">
          <span>{{ $t(`Print.SerialNumber`) }}{{ item.seqNo }}</span>
          <img style="width: 70px; height: 70px" :src="item.barcode" alt="" />
          <span class="size-12">{{ $t(`Print.RongyangUpper`) }}</span>
        </div>
        <div>
          <table>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Department`) }}<</td>
              <td class="size-8 center pad3" colspan="2">{{ demptName || demptName1 }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Directives`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.lotNo }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Body`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.style }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.MatchColors`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.color }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Number`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.sizeNo + '#' }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Even`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.caseQty }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- 批量打印 -->
    <div class="qrCodeContainer1" style="width: 450px; height: 50px; display: none">
      <div v-for="(item, index) in imageList1" :key="index" style="width: 100%" class="main qrCode content">
        <div class="left">
          <span>{{ $t(`Print.SerialNumber`) }}{{ item.seqNo }}</span>
          <img style="width: 70px; height: 70px" :src="item.barcode" alt="" />
          <span class="size-12">{{ $t(`Print.RongyangUpper`) }}</span>
        </div>
        <div>
          <table>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Department`) }}<</td>
              <td class="size-8 center pad3" colspan="2">{{ demptName || demptName1 }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Directives`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.lotNo }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Body`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.style }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.MatchColors`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.color }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Number`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.sizeNo + '#' }}</td>
            </tr>
            <tr>
              <td class="size-8 center pad3" colspan="2">{{ $t(`Print.Even`) }}</td>
              <td class="size-8 center pad3" colspan="2">{{ item.caseQty }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <Find @Launchform="Launchform5" :OriginalFilter="{ static: true }" :formList="formList1" @findClicked="findData" />

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '15px' }">
      <div style="display: flex">
        <div style="width: 90%">
          <h1>{{ $t(`Print.OtherMaterialsAreInquiredAboutTheOutboundOfTheWarehouse`) }}</h1>
          <Table
            @selectList="selectList"
            :summaryData="summaryData1"
            summary
            :isLoading="isLoading1"
            :tableHeader="tableHeader"
            :tableData="BarcodeQueryTableDate"
            :selection="true"
            :TableHeight="98"
          />
          <PageModule
            :PageData="{ buttonS: true, total: totalL }"
            :layout="'prev, pager'"
            @pageChange="pageChangeL"
            @pageSizeChange="pageSizeChangeL"
          />
        </div>
        <div style="width: 9%; margin-left: 10px">
          <h1>{{ $t(`Print.PrintLabels`) }}</h1>
          <Table @selectList="selectListq" :tableHeader="tableHeader1" :tableData="SizeNoQueryTableDate" :selection="true" :TableHeight="98" />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { TreasurySinglePosition } from '@/api/WarehouseDepartment/FactoryStorage/DeliveryNeedleCarReplenishmentDocuments'
import { ElMessage } from 'element-plus'
import fileRequest from '@/utils/fileRequest'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'batchQury'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted, watch } from 'vue'
import {
  BatchPrinting,
  BarcodeQuery,
  GenerateUpperLabel,
  displaySizeNumber,
  SizeNoQuery
} from '@/api/AccountingDepartment/FactoryProductionOperation/UpperBarCodeLabel'
import QRCode from 'qrcode'
// 批量打印
const BatchPrintingParms = ref({
  barcodeList: [],
  deptName: '',
  lotNo: '',
  deptNo: ''
})

const imageList1 = ref<any[]>([])

const makeQRCode1 = async () => {
  try {
    // 确保 barcodeList 是有效的数组
    if (!Array.isArray(OrderedDetailsParms1.value.barcodeList)) {
      return []
    }

    const imagePromises = OrderedDetailsParms1.value.barcodeList.map(async (item: any) => {
      const { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo } = item

      // 检查条形码是否有效
      if (!barcode) {
        return null // 或者这里可以返回默认值
      }

      // 生成二维码
      const qrCodeImage = await QRCode.toDataURL(barcode)
      return { barcode: qrCodeImage, lotNo, deptName, sizeNo, caseQty, style, color, seqNo }
    })

    // 等待所有 Promise 完成
    const imageUrls = await Promise.all(imagePromises)

    // 过滤出有效的二维码
    imageList1.value = imageUrls.filter((url) => url !== null)

    return imageList1.value // 返回生成的二维码图像列表
  } catch (error) {
    return [] // 在发生错误时返回空数组
  }
}

const OrderedDetailsParms1 = ref<any>({
  barcodeList: [],
  deptName: '',
  lotNo: '',
  deptNo: ''
})

watch(
  () => OrderedDetailsParms1.value,
  (newValue, oldValue) => {
    makeQRCode1()
  },
  { deep: true }
)

const printQRCode1 = () => {
  const qrCodeContainer1 = document.querySelector('.qrCodeContainer1')

  if (qrCodeContainer1 && qrCodeContainer1.children.length > 0) {
    const printWindow = window.open('', '_blank')

    printWindow!.document.write(`
          <!DOCTYPE html>
          <html>
            <head>
              <title>打印所选标签页</title>
              <link rel="stylesheet" type="text/css" href="print.css" media="print">
             <style>
              body, html {
                margin: 0;
                padding: 0;
              }
             @media print {  
                  @page {  
                      margin-top: 6mm;  
                      margin-left: 0mm;  
                      margin-right: 0mm;  
                      margin-bottom: 0mm;  
                  }
                      body {  
                          margin: 0;  
                          padding: 0;
                          transform-origin: top; /* 设置缩放原点 */  
                         
                      } 
                           .qrCode {  
                                page-break-after: always; /* 每个二维码后分页 */  
                            }  
                             
                                .qrCode:last-child {  
          page-break-after: avoid !important;  
      }  
              } 
                    
    
                } 
              h2 {
                      margin-left: initial; /* 或者设置适合打印的左边距 */
                      page-break-inside: avoid; /* 避免在h2元素内部分页 */
              }
              .pad3 {
                  padding: 3px;
              }
    
              .main {
                  display: flex;
                  justify-content: center;
              }
    
              .left {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  margin-right: 5px;
              }
    
    
              .title {
                  display: flex;
                  justify-content: center;
                  margin-bottom: 10px;
              }
    
              .center {
                  text-align: center;
              }
    
              .right {
                  text-align: right;
              }
    
              .left {
                  text-align: left;
              }
    
              .no-padding {
                  padding: 0;
              }
    
              .no-margin {
                  margin: 0;
              }
    
              .margin-5 {
                  margin: 5px;
              }
    
              .margin-top-5 {
                  margin-top: 5px;
              }
    
              .margin-top-15 {
                  margin-top: 15px;
              }
    
              .size-8 {
                  font-size: 8px !important;
              }
    
              .size-10 {
                  font-size: 10px;
              }
    
              .size-12 {
                  font-size: 12px;
              }
    
              .size-14 {
                  font-size: 14px;
              }
    
              .size-16 {
                  font-size: 17px;
              }
    
              .size-18 {
                  font-size: 18px;
              }
    
              .size-24 {
                  font-size: 24px;
              }
    
              #date-tip {
                  position: relative;
              }
    
              span.tip {
                  display: inline-block;
                  height: 14px;
                  line-height: 14px;
                  margin-right: 30px;
              }
    
              table {
                  font-size: 10px;
                  border-collapse: collapse;
                  border-spacing: 0;
                  border-collapse: collapse;
                  border-spacing: 0;
                  empty-cells: show;
                  width: 100%;
              }
    
              table th,
              table td {
                  border: 1px solid #000;
                  font-size: 12px;
              }
    
              table.no-border,
              table.no-border th,
              table.no-border td {
                  border: 0px;
              }
    
              table td.no-left-border {
                  border-left: 0px;
              }
    
              table td.no-right-border {
                  border-right: 0px;
              }
    
              .mainTable {
                  margin: 0 20px;
              }
    
              /* 备料派工单汇总表 */
              .header {
                  display: flex;
                  justify-content: space-evenly;
              }
    
              .footer {
                  margin-top: 20px;
                  margin-right: 100px;
                  display: flex;
                  justify-content: right;
              }
    
    
    
              /* 可以在这里添加更多自定义的打印样式 */
            </style>
            </head>
            <body>
          `)

    const qrCodeImages = qrCodeContainer1.querySelectorAll('.qrCode')
    qrCodeImages.forEach((img) => {
      const cloneImg = img.cloneNode(true)
      printWindow!.document.body.appendChild(cloneImg)
    })

    printWindow!.document.write(`
            </body>
          </html>
        `)
    printWindow!.document.close()

    printWindow!.print()
  } else {
  }
}

const BatchPrintingMethods = async () => {
  if (BatchPrintingParms.value.barcodeList.length === 0) {
    JMessage.warning('请选择正确的号码')
  } else {
    const result = await BatchPrinting(BatchPrintingParms.value)

    if (result.code === 200) {
      OrderedDetailsParms1.value.barcodeList = result.data

      // 生成二维码
      await makeQRCode1() // 等待二维码生成完成

      // 现在你可以打印二维码
      BarcodeQueryMethods()
      printQRCode1()
    } else {
    }
  }
}

const selectListq = (item: any) => {
  BatchPrintingParms.value.barcodeList = item.map((item: any) => {
    return item.sizeNo
  })
}

// 打印参数
const demptName = ref('')
const demptName1 = ref('')

// 号码查询
const SizeNoQueryTableDate = ref([])

const SizeNoQueryMethods = async () => {
  const result = await SizeNoQuery(styleList.value)
  if (result.code === 200) {
    SizeNoQueryTableDate.value = result.data.codeDetails
    JMessage.success(result.message)
  } else {
    JMessage.warning('请输入正确的指令')
  }
}

// 号码查询
const displaySizeNumberMethodsParms = ref({
  lotNo: ''
})

const styleList = ref({
  baseSize: '',
  flag: '',
  lotNo: '',
  style: ''
})

const displaySizeNumberMethods = async () => {
  const result = await displaySizeNumber(displaySizeNumberMethodsParms.value)
  if (result.code === 200 && result.data !== null) {
    styleList.value.lotNo = result.data.lotNo
  }
}

// 生成鞋面标签
const GenerateUpperLabelParms = ref({
  caseTty: '',
  lotNo: ''
})

const GenerateUpperLabelMethods = async () => {
  const result = await GenerateUpperLabel(GenerateUpperLabelParms.value)
  if (result.code === 200) {
    BarcodeQueryMethods()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

//   const TreasurySinglePositionMethods = async () => {
//     let NewArray = []
//     const result = await TreasurySinglePosition()
//     NewArray = result.reduce((arr: any, item: any) => {
//       if (item.deptName) { // 只添加非空的 typeName 和 typeNo
//         arr.push(item.deptNo + ' ' + item.deptName);
//       }
//       return arr;
//     }, []);

//     formList1.value[7].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
//   }

//   const TreasurySinglePositionMethods1 = async () => {
//     let NewArray = []
//     const result = await TreasurySinglePosition()
//     NewArray = result.reduce((arr: any, item: any) => {
//       if (item.deptName) { // 只添加非空的 typeName 和 typeNo
//         arr.push(item.deptNo + ' ' + item.deptName);
//       }
//       return arr;
//     }, []);
//     formList1.value[14].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
//   }

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const Launchform5 = (row: any) => {
  console.log(row)
  BarcodeQueryParms.value.lotNo = row[0].inputValue
  BarcodeQueryParms.value.sizeNo = row[1].inputValue
  BarcodeQueryParms.value.checkBox1 = row[2].checked === true ? 1 : null
  BarcodeQueryParms.value.checkBox2 = row[3].checked === true ? (row[4].checked === true ? null : 1) : (row[4].checked === true ? 2 : null)
  BarcodeQueryParms.value.checkBox3 = row[5].checked === true ?  (row[6].checked === true ? null : 1) : (row[6].checked === true ? 2 : null)
  BarcodeQueryParms.value.checkBox4 = row[7].checked === true ? 1 : null
  BarcodeQueryParms.value.checkBox5 = row[8].checked === true ? 1 : null
  demptName.value = row[9].selectValue.split('_')[1]
  batchNumber.value = row[15].inputValue
  demptName1.value = row[16].selectValue.split('_')[1]

  GenerateUpperLabelParms.value.caseTty = row[12].inputValue
  GenerateUpperLabelParms.value.lotNo = row[11].inputValue

  OrderedDetailsParms.value.deptName = row[9].selectValue.split(' ')[1]
  OrderedDetailsParms.value.deptNo = row[9].selectValue.split(' ')[0]

  BatchPrintingParms.value.deptName = row[16].selectValue.split(' ')[1]
  BatchPrintingParms.value.deptNo = row[16].selectValue.split(' ')[0]
  BatchPrintingParms.value.lotNo = row[14].inputValue

  displaySizeNumberMethodsParms.value.lotNo = row[12].inputValue
  if (row[12].inputValue !== '') {
    displaySizeNumberMethods()
  }
}

const summaryData1 = ref<any[]>([
  {
    index: 5,
    num: 0
  },
  {
    index: 11,
    num: 0
  },
  {
    index: 12,
    num: 0
  },
  {
    index: 15,
    num: 0
  },
  {
    index: 16,
    num: 0
  }
])

// 表格数据查询
const BarcodeQueryParms = ref<any>({
  checkBox1: '',
  checkBox2: '',
  checkBox3: '',
  checkBox4: '',
  checkBox5: '',
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  sizeNo: ''
})

const isLoading1 = ref(true)

const BarcodeQueryTableDate = ref([])

const BarcodeQueryMethods = async () => {
  isLoading1.value = true
  const result = await BarcodeQuery(BarcodeQueryParms.value)
  BarcodeQueryTableDate.value = result.list.map((item: any) => {
    if (item.printFlag !== null) {
      item.printFlag = true
    }

    if (item.inFlag !== null) {
      item.inFlag = true
    }

    if (item.outFlag !== null) {
      item.outFlag = true
    }

    if (item.printFlag) {
      item.change = null
    }

    return item
  })
  summaryData1.value[0].num = result.caseQtyCount
  summaryData1.value[1].num = result.inQtyCount
  summaryData1.value[2].num = result.inSumCount
  summaryData1.value[3].num = result.OutQtyCount
  summaryData1.value[4].num = result.outSumCount
  totalL.value = result.total
  isLoading1.value = false
}

const totalL = ref(0)

const pageChangeL = (val: any) => {
  BarcodeQueryParms.value.pageNum = val
  BarcodeQueryMethods()
}

const pageSizeChangeL = (val: any) => {
  BarcodeQueryParms.value.pageSize = val
  BarcodeQueryMethods()
}

const batchNumber = ref('1')

onMounted(() => {
  // TreasurySinglePositionMethods()

  // TreasurySinglePositionMethods1()

  BarcodeQueryMethods()
})

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入号码',
    inputValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '未打印条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '未缴库条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '已缴库条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '未出货条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '已出货条码',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '指令入库尾数',
    checked: false
  },
  {
    type: 'checkbox',
    checkboxLabel: '指令出库尾数',
    checked: false
  },
  // {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '缴库单位',
  //   selectLabel: '',
  //   selectOptions: [],
  // },
  // {
  //   type: 'button',
  //   checkboxLabel: '打印所选标签',
  // },
  // {
  //   type: 'input',
  //   inputPlaceholder: '指令',
  //   inputValue: ''
  // },
  // {
  //   type: 'input',
  //   inputLabel: '每袋双数',
  //   inputValue: ''
  // },
  // {
  //   type: 'button',
  //   checkboxLabel: '生成鞋面标签',
  // },
  // {
  //   type: 'input',
  //   inputPlaceholder: '请输入指令',
  //   inputValue: ''
  // },
  // {
  //   type: 'input',
  //   inputPlaceholder: '请输入批次',
  //   inputValue: '1'
  // },
  // {
  //   type: 'select',
  //   selectValue: '',
  //   selectP: '缴库单位 ',
  //   selectLabel: '',
  //   selectOptions: [],
  // },
  // {
  //   type: 'button',
  //   checkboxLabel: '显示号码',
  // },
  // {
  //   type: 'button',
  //   checkboxLabel: '打印鞋面标签',
  // },
  {
    type: 'button',
    checkboxLabel: '搜索'
  }
])

const findData = async (count: any) => {
  if (count === '生成鞋面标签') {
    if (GenerateUpperLabelParms.value.caseTty === '' || GenerateUpperLabelParms.value.lotNo === '') {
      JMessage.warning('指令和每袋双数不可为空')
    } else {
      GenerateUpperLabelMethods()
    }
  }

  if (count === '打印所选标签') {
    if (OrderedDetailsParms.value.deptName === '') {
      JMessage.warning('缴库单位不可为空')
    } else if (OrderedDetailsParms.value.barcodeList.length === 0) {
      JMessage.warning('请勾选需要打印的数据')
    } else {
      OrderedDetailsParms.value.barcodeList = OrderedDetailsParms.value.barcodeList.map((item: any) => {
        return item.barcode
      })
      const res = await LoginWork.post<any, any>(`/produce/PrintSelectedLabels`, OrderedDetailsParms.value)
      if (res.code === 200) {
        BarcodeQueryMethods()
        printQRCode()
      }
    }
  }
  if (count === '显示号码') {
    if (styleList.value.lotNo === '') {
      JMessage.warning('请先输入指令在进行查询')
    } else {
      SizeNoQueryMethods()
    }
  }

  if (count === '打印鞋面标签') {
    if (BatchPrintingParms.value.lotNo === '') {
      JMessage.warning('请先输入指令')
    } else if (BatchPrintingParms.value.deptName === '' || BatchPrintingParms.value.deptName === undefined) {
      JMessage.warning('缴库单位不可为空')
    } else {
      BatchPrintingMethods()
    }
  }

  if (count === '搜索') {
    BarcodeQueryMethods()
  }
}

const printQRCode = () => {
  const qrCodeContainer = document.querySelector('.qrCodeContainer')

  if (qrCodeContainer && qrCodeContainer.children.length > 0) {
    const printWindow = window.open('', '_blank')

    printWindow!.document.write(`
            <!DOCTYPE html>
            <html>
              <head>
                <title>打印所选标签页</title>
                <link rel="stylesheet" type="text/css" href="print.css" media="print">
               <style>
                body, html {
                  margin: 0;
                  padding: 0;
                }
               @media print {  
                    @page {  
                        margin-top: 6mm;  
                        margin-left: 0mm;  
                        margin-right: 0mm;  
                        margin-bottom: 0mm;  
                    }
                        body {  
                            margin: 0;  
                            padding: 0;
                            transform-origin: top; /* 设置缩放原点 */  
                           
                        } 
                             .qrCode {  
                                  page-break-after: always; /* 每个二维码后分页 */  
                              }  
                               
                                  .qrCode:last-child {  
            page-break-after: avoid !important;  
        }  
                } 
                      
    
                  } 
                h2 {
                        margin-left: initial; /* 或者设置适合打印的左边距 */
                        page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
                .pad3 {
                    padding: 3px;
                }
    
                .main {
                    display: flex;
                    justify-content: center;
                }
    
                .left {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-right: 5px;
                }
    
    
                .title {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 10px;
                }
    
                .center {
                    text-align: center;
                }
    
                .right {
                    text-align: right;
                }
    
                .left {
                    text-align: left;
                }
    
                .no-padding {
                    padding: 0;
                }
    
                .no-margin {
                    margin: 0;
                }
    
                .margin-5 {
                    margin: 5px;
                }
    
                .margin-top-5 {
                    margin-top: 5px;
                }
    
                .margin-top-15 {
                    margin-top: 15px;
                }
    
                .size-8 {
                    font-size: 8px !important;
                }
    
                .size-10 {
                    font-size: 10px;
                }
    
                .size-12 {
                    font-size: 12px;
                }
    
                .size-14 {
                    font-size: 14px;
                }
    
                .size-16 {
                    font-size: 17px;
                }
    
                .size-18 {
                    font-size: 18px;
                }
    
                .size-24 {
                    font-size: 24px;
                }
    
                #date-tip {
                    position: relative;
                }
    
                span.tip {
                    display: inline-block;
                    height: 14px;
                    line-height: 14px;
                    margin-right: 30px;
                }
    
                table {
                    font-size: 10px;
                    border-collapse: collapse;
                    border-spacing: 0;
                    border-collapse: collapse;
                    border-spacing: 0;
                    empty-cells: show;
                    width: 100%;
                }
    
                table th,
                table td {
                    border: 1px solid #000;
                    font-size: 12px;
                }
    
                table.no-border,
                table.no-border th,
                table.no-border td {
                    border: 0px;
                }
    
                table td.no-left-border {
                    border-left: 0px;
                }
    
                table td.no-right-border {
                    border-right: 0px;
                }
    
                .mainTable {
                    margin: 0 20px;
                }
    
                /* 备料派工单汇总表 */
                .header {
                    display: flex;
                    justify-content: space-evenly;
                }
    
                .footer {
                    margin-top: 20px;
                    margin-right: 100px;
                    display: flex;
                    justify-content: right;
                }
    
    
    
                /* 可以在这里添加更多自定义的打印样式 */
              </style>
              </head>
              <body>
            `)

    const qrCodeImages = qrCodeContainer.querySelectorAll('.qrCode')
    qrCodeImages.forEach((img) => {
      const cloneImg = img.cloneNode(true)
      printWindow!.document.body.appendChild(cloneImg)
    })

    printWindow!.document.write(`
              </body>
            </html>
          `)
    printWindow!.document.close()

    printWindow!.print()
  } else {
  }
}

const imageList = ref<any[]>([])

const makeQRCode = async () => {
  try {
    const imagePromises = OrderedDetailsParms.value.barcodeList.map(async (item: any) => {
      let { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo } = item
      barcode = await QRCode.toDataURL(barcode)
      return { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo }
    })

    const imageUrls = await Promise.all(imagePromises)
    imageList.value = imageUrls
  } catch (error) {
    return []
  }
}

const selectList = (selectedRows: any[]) => {
  OrderedDetailsParms.value.barcodeList = selectedRows.map((item: any) => {
    const { barcode, lotNo, deptName, sizeNo, caseQty, style, color, seqNo } = item
    return {
      barcode,
      lotNo,
      deptName,
      sizeNo,
      caseQty,
      style,
      color,
      seqNo
    }
  })
}

const OrderedDetailsParms = ref<any>({
  barcodeList: [],
  deptName: '',
  lotNo: '',
  deptNo: ''
})

watch(
  () => OrderedDetailsParms.value,
  (newValue, oldValue) => {
    makeQRCode()
  },
  { deep: true }
)

// 表格数据

const tableHeader = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '号码',
    prop: 'sizeNo'
  },
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    label: '条码',
    prop: 'barcode'
  },
  {
    label: '条码双数',
    prop: 'caseQty'
  },
  {
    label: '已打印',
    type: 'checkbox',
    prop: 'printFlag'
  },
  {
    label: '打印时间',
    prop: 'printTime'
  },
  {
    label: '单位',
    prop: 'deptName'
  },
  {
    label: '已入库扫描',
    type: 'checkbox',
    prop: 'inFlag'
  },
  {
    label: '入库扫描时间',
    prop: 'inTime'
  },
  {
    label: '入库数量',
    prop: 'inQty'
  },
  {
    label: '入库尾数',
    prop: 'inSum'
  },
  {
    label: '已出库扫描',
    type: 'checkbox',
    prop: 'outFlag'
  },
  {
    label: '出库扫描日期',
    prop: 'outTime'
  },
  {
    label: '出库数量',
    prop: 'outQty'
  },
  {
    label: '出库尾数',
    prop: 'outSum'
  }
])

const tableHeader1 = ref([
  {
    label: '号码',
    prop: 'sizeNo'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

.left {
  text-align: left;
}
</style>
